<div class="el-slider__button-wrapper" 
    [class.hover]="hovering" 
    [class.dragging]="dragging"
    [class.isVertical]="vertical" 
    [style]="wrapperStyles" 
    (mouseenter)="togglePopper(true)"
    (mouseleave)="togglePopper(false)" 
    (mousedown)="buttonDownHandle($event)">

    <!-- <div class="el-slider__button el-tooltip" #wrapper (mouseenter)="popperMouseHandle(true)"
        (mouseleave)="popperMouseHandle(false)"></div>

 
    <div class="el-tooltip__popper is-dark popper-center" x-placement="top" style="top:-33px;"  [@fadeSliderAnimation]="!showPopper">
        <div x-arrow class="popper__arrow" style="left: 50%; transform: translateX(-50%);"></div>
        <span>{{ formatValue() }}</span>
    </div> -->


    <el-tooltip  placement="top"  [disabled]="!showPopper" [popper-class]="root.tooltipClass">
        <ng-template #tip>
            <span>{{ formatValue() }}</span>
        </ng-template>
        <div class="el-slider__button el-tooltip" ></div>
    </el-tooltip>
</div>